<template>
	<view class="nav">
		<view class="title" :style="style">
			<uni-icons type="back" size="22" :color="navColor" @click="back"></uni-icons>
			<view :style="'color:' +  navColor + ';'">{{title}}</view>
			<slot name="right" >
				<view class="right-info">
					
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"navbar",
		data() {
			return {
				
			};
		},
		props:{
			navColor:{
				type:'String',
				default:'#333'
			},
			title:{
				type:'String',
				default:''
			},
			style:{
				type:'Object',
				default:{
					background:'#FFF'
				}
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
		padding-top: var(--status-bar-height);
		.title{
			font-size: 28rpx;	
			text-align: center;
		}
		.right-info{
			min-width: 22px;
		}
	}
</style>